<style>
</style>
<template>
    <el-tabs  v-model="verifyType" type="card" >
        <el-tab-pane label="触发式" name="hidePanel">
            <el-form style="width: 412px;padding-top: 10px" label-width="125px">
                <el-form-item label="账号" prop="name">
                    <el-input v-model="form.account" placeholder="请输入账号"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="desc">
                    <el-input v-model="form.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="" prop="desc">
                    <div ref="verify-container"></div>
                </el-form-item>
            </el-form>
        </el-tab-pane>
        <el-tab-pane label="弹出式" name="pop">
            <el-form style="width: 412px" label-width="125px">
                <el-form-item label="账号" prop="name">
                    <el-input v-model="form.account" placeholder="请输入账号"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="desc">
                    <el-input v-model="form.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="" >
                    <el-button ref="verify-button" type="primary" @click="showVerify">点击验证</el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>
        <el-tab-pane style="width: 412px" label="内嵌式" name="in">
            <el-form label-width="125px">
                <el-form-item label="账号" prop="name">
                    <el-input v-model="form.account" placeholder="请输入账号"></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="desc">
                    <el-input v-model="form.password" placeholder="请输入密码"></el-input>
                </el-form-item>
                <el-form-item label="" prop="desc">
                    <div ref="verify-container2"></div>
                </el-form-item>
            </el-form>
        </el-tab-pane>
    </el-tabs>


</template>
<script>
    Rap.define("index", [], function () {
        return {
            data: function () {
                return {
                    verifyType:'hidePanel',
                    form: {
                        account: '藤之内',
                        password: '123456',
                    }
                }
            },
            mounted: function () {
                var me=this;
                Rap.loadCss('/static/ly/libs/lyverify/index.css');
                Rap.insertScript([
                    "/static/ly/libs/lyverify/index.js"]).then(function (){
                    LyVerify.move({
                        container:me.$refs['verify-container'],
                        codeUrl: '/captcha/moveCode',
                        checkUrl: '/captcha/moveCheck',
                        hidePanel:true,
                        checkParams:function (){
                            return {a:'a','b':'b'};
                        },
                        fail: function (rs) {
                            console.log('move', 'fail', rs);
                        }, success: function (rs) {
                            console.log('move', 'success', rs);
                        }
                    });
                    LyVerify.move({
                        container:me.$refs['verify-container2'],
                        codeUrl: '/captcha/moveCode',
                        checkUrl: '/captcha/moveCheck',
                        checkParams:function (){
                            return {a:'a','b':'b'};
                        },
                        fail: function (rs) {
                            console.log('move', 'fail', rs);
                        }, success: function (rs) {
                            console.log('move', 'success', rs);
                        }
                    });

                    me.verify=LyVerify.move({
                        codeUrl: '/captcha/moveCode',
                        checkUrl: '/captcha/moveCheck',
                        checkParams:function (){
                            return {a:'a','b':'b'};
                        },
                        fail: function (rs) {
                            console.log('move', 'fail', rs);
                        }, success: function (rs) {
                            console.log('move', 'success', rs);
                        }
                    });
                })
            },
            methods: {
                showVerify:function (){
                    // this.verify.reset();
                    this.verify.show( this.$refs['verify-button'].$el);
                },

            }
        }
    })
</script>